<template>
   <navbar>
        <template #centernav>
            <ul class="list">
                <li v-for="(item,index) in titlelist" 
                    :class="{active:index==curentindex}" 
                    :key="index" @click="changei(index)">{{item}}
                </li>
            </ul>
        </template>
        <template #leftnav>
            <img src="@/assets/img/home/back.png" alt="" @click="detailback">
        </template>
    </navbar>
</template>

<script>
import navbar from '@/components/common/navbar/NavBar.vue'
export default {
    components:{
        navbar
    },
    data() {
            return {
                titlelist:['商品','参数','评论','推荐'],
                curentindex:0
            }
        },
    methods: {
        detailback(){
            this.$router.back()
        },
        changei(i){
            this.curentindex = i
            this.$emit('titleclick',i)
        }
       
    },
}
</script>

<style scoped>
.list{
    font-size: 13px;
    margin-left: 10px;
    display: flex;
    justify-content:space-evenly;
}
.list li{
    
}
.active{
    color: deeppink;
    border-bottom: 1px solid deeppink;
}
img {
    vertical-align: middle;
}
</style>